<template>
  <!--计划回款/应收表 视图-->
  <div style="background-color: #E9EEF3;">
    <!--<el-row class="m-b-10">
      <el-col :offset="2" :span="4">
        <div style="line-height: 56px;font-size: 18px;width:200px">审批过程：</div>
      </el-col>
      &lt;!&ndash;同意显示同意&ndash;&gt;
      <el-col v-if="this.planreceivable.planreceivableAppStatus !== 3" :span="18">
        <el-steps :active="active" finish-status="success" space="20%">
          <el-step title="待申请"></el-step>
          <el-step title="待审批"></el-step>
          <el-step title="同意"></el-step>
          <el-step title="执行"></el-step>
        </el-steps>
      </el-col>
      &lt;!&ndash;否决显示否决&ndash;&gt;
      <el-col v-if="this.planreceivable.planreceivableAppStatus === 3" :span="18">
        <el-steps :active="active" finish-status="success" space="20%">
          <el-step title="待申请"></el-step>
          <el-step title="待审批"></el-step>
          <el-step title="否决"></el-step>
          <el-step title="执行"></el-step>
        </el-steps>
      </el-col>
    </el-row>-->
    <!--<el-row class="m-b-10">
      <el-row v-if="this.planreceivable.planreceivableAppStatus === 0">
        <el-col  :offset="8" :span="4" >
          <div class="opera" @click="findAllEmp(currPage,pageSize)">
            <div style="line-height: 30px;"><i class="el-icon-position"/></div>
            <span class="font-14">申请审批</span>
          </div>
        </el-col>
        <el-col  :span="4" >
          <div class="opera-no">
            <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
            <span class="font-14">撤销审批</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.planreceivable.planreceivableAppStatus === 1">
        <el-col  :offset="8" :span="4" >
          <div class="opera-no">
            <div style="line-height: 30px;"><i class="el-icon-position"/></div>
            <span class="font-14">申请审批</span>
          </div>
        </el-col>
        <el-col  :span="4" >
          <div class="opera" @click="repealApp">
            <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
            <span class="font-14">撤销审批</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.planreceivable.planreceivableAppStatus === 3">
        <el-col  :offset="8" :span="4" >
          <div class="opera" @click="findAllEmp(currPage,pageSize)">
            <div style="line-height: 30px;"><i class="el-icon-position"/></div>
            <span class="font-14">申请审批</span>
          </div>
        </el-col>
        <el-col  :span="4" >
          <div class="opera-no">
            <div style="line-height: 30px;"><i class="el-icon-d-arrow-left"/></div>
            <span class="font-14">撤销审批</span>
          </div>
        </el-col>
      </el-row>
      &lt;!&ndash; 员工表格dialog&ndash;&gt;
      <el-dialog width="30%" title="申请审批" :visible.sync="innerDialog">
        <div style="margin-bottom: 20px"><span class="font-14-bold">说明：</span>以下人员拥有审批权限</div>
        <el-table :data="empList" style="width: 100%">
          <el-table-column prop="job.jobName" label="员工职位" >
          </el-table-column>
          <el-table-column prop="empName" label="员工姓名" >
          </el-table-column>
        </el-table>
        <el-row style="margin-top:10px">
          <el-col :span="16">
            <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                           :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
          </el-col>
        </el-row>
        <div style="margin-top: 20px;text-align: center">
          <el-button @click="saveApproval">申请审批</el-button>
        </div>
        &lt;!&ndash;<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="emp in empList" :label="emp.empName" :key="emp.empName">{{emp.empName}}</el-checkbox>
        </el-checkbox-group>&ndash;&gt;
      </el-dialog>
    </el-row>-->
    <el-row>
      <el-col :span="18" :offset="3" style="color: #333333;margin-bottom: 20px;margin-top: 20px;">
        <el-row style="background:#ffffff;padding:0 20px">
          <el-col :span="24">
            <div class="dialog__header">
              <span class="dialog__title">计划回款/应收表 </span>
            </div>
          </el-col>
        </el-row>
        <el-row style="background:#ffffff;padding:0 20px">
          <el-form label-width="100px" :rules="rules" :model="planreceivable" ref="plan">
            <hr style="margin-top: -20px;margin-bottom: 15px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="供应商/客户:" prop="customerByCustomerId.customerName" style="width: 830px">
                  <el-input :disabled="true" v-model="planreceivable.customerByCustomerId.customerName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同订单:" prop="contractByContractId" style="width: 830px">
                  <el-input :disabled="true" v-model="planreceivable.contractByContractId.contractTheme"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划回款日期:" style="width: 395px">
                  <el-date-picker  type="date" placeholder="选择日期" style="width: 296px" v-model="planreceivable.planreceivableDate"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期次:" prop="planreceivableIssue">
                  <el-select v-model="planreceivable.planreceivableIssue" placeholder="未选"  style="width: 255px">
                    <el-option
                      v-for="item in periods"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="金额:" style="width: 395px" prop="planreceivableMoney">
                  <el-input v-model="planreceivable.planreceivableMoney"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人:" style="width: 370px">
                  <el-input style="width: 255px" v-model="planreceivable.employeeByEmpId.empName" :disabled="true">
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所有者:">
                  <el-input :disabled="true" style="width: 730px" placeholder="boss">
                    <!--<el-button slot="append" icon="el-icon-search" ></el-button>-->
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="margin-left: 30px;margin-bottom: 20px">
                <span style="margin-right: 10px">是否回款:</span>
                <el-radio-group v-model="radio">
                  <el-radio :label="1">已回</el-radio>
                  <el-radio :label="2">未回</el-radio>
                  <el-radio :label="3">不提醒</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" style="width: 830px">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="planreceivable.planreceivableNote"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="6">
                <el-form-item>
                  <el-button type="primary" @click="addPlanReceivable()">保存</el-button>
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      emp:{},
      radio:2,
      contractList:{},
      pageSize: 5, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      active: 0, //审批步骤初始值
      empList:[],// 所有Boss用户
      innerDialog: false,// bossDialog
      planreceivable: {
        employeeByEmpId:'',//所有者(负责人)
        planreceivableId:0,
        planreceivableDate:'',//回款日期
        planreceivableNote:'',//备注
        planreceivableBack:'',//是否回款
        planreceivableIssue:0,//期次
        planreceivableMoney:'0.0',//金额
        planreceivableEmpName:'',//所有者
        planreceivablePrincipal:'',//负责人
        customerByCustomerId:'',//客户
        contractByContractId:'',//合同订单
        employeeByAppEmpId:null,
        planreceivableAppStatus:0
      },
      //弹出框的期次
      periods: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }, {
        value: '选项6',
        label: '6'
      }],
      //状态
      status: [{
        value: '选项1',
        label: '未付'
      }, {
        value: '选项2',
        label: '已付'
      }, {
        value: '选项3',
        label: '不提醒'
      }],
      statuvalue:'',
      periodvalue: '',
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,
      rules: {
        name: [

        ]},
      mulSelection: [],
    }
  },
  methods: {
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    // 查询回款计划
    initData () {
      let backId = this.$route.query.backId
      this.$axios.get('http://localhost:8088/planreceivable-back-plan',{
        params:{
          backId: backId
        }
      })
        .then(v => {
          this.planreceivable = v.data
          console.log('回款计划')
          console.log(this.planreceivable)
         /* if(this.planreceivable.planreceivableAppStatus === 0){
            this.active = 0
          }else if (this.planreceivable.planreceivableAppStatus === 1){
            this.active = 1
          }else if (this.planreceivable.planreceivableAppStatus === 2){
            this.active = 2
          }else if (this.planreceivable.planreceivableAppStatus === 3){
            this.active = 2
          }*/
        })
        .catch(function (v) {})
    },
    //新增
    addPlanReceivable(){
      // 状态
      this.planreceivable.planreceivableBack = this.radio
      this.$refs.plan.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-planreceivable',
            {
              planreceivableId:this.planreceivable.planreceivableId,
              planreceivableDate:this.planreceivable.planreceivableDate,
              planreceivableNote:this.planreceivable.planreceivableNote,
              planreceivableBack:this.planreceivable.planreceivableBack,
              planreceivableIssue:this.planreceivable.planreceivableIssue,
              planreceivableMoney:this.planreceivable.planreceivableMoney,
              contractByContractId:this.planreceivable.contractByContractId,
              customerByCustomerId:this.planreceivable.customerByCustomerId,
              employeeByEmpId:this.planreceivable.employeeByEmpId,
            })
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize)
              // 2、关闭弹框
              this.dialogFormVisible = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 查询所有boss
    findAllEmp(currPage,pageSize){
      this.innerDialog = true
      this.$axios.get('http://localhost:8088/emp-boss-list',{params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.empList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    //boss分页
    changePage (val) {
      // val就是当前页码
      this.findAllEmp(val, this.pageSize)
    },
    open () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created:function(){
    this.loginEmp()
    this.initData(this.currPage, this.pageSize)
  }
}
</script>

<style>
  .dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;

  }
  .dialog__header{
    padding: 20px 20px 40px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .cursor{
    cursor: pointer;
  }
</style>
